<!--<template>-->
<!--  <div :class="['description-list', size, layout === 'vertical' ? 'vertical': 'horizontal']">-->
<!--    <div v-if="title" class="title">{{ title }}</div>-->
<!--    <a-row>-->
<!--      <slot></slot>-->
<!--    </a-row>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { Col } from 'ant-design-vue/es/grid/'-->

<!--const Item = {-->
<!--  name: 'DetailListItem',-->
<!--  props: {-->
<!--    term: {-->
<!--      type: String,-->
<!--      default: '',-->
<!--      required: false-->
<!--    }-->
<!--  },-->
<!--  inject: {-->
<!--    col: {-->
<!--      type: Number-->
<!--    }-->
<!--  },-->
<!--  render () {-->
<!--    return (-->
<!--      <Col {...{ props: responsive[this.col] }}>-->
<!--        <div class="term">{this.$props.term}</div>-->
<!--        <div class="content">{this.$slots.default}</div>-->
<!--      </Col>-->
<!--    )-->
<!--  }-->
<!--}-->

<!--const responsive = {-->
<!--  1: { xs: 24 },-->
<!--  2: { xs: 24, sm: 12 },-->
<!--  3: { xs: 24, sm: 12, md: 8 },-->
<!--  4: { xs: 24, sm: 12, md: 6 }-->
<!--}-->

<!--export default {-->
<!--  name: 'DetailList',-->
<!--  Item: Item,-->
<!--  components: {-->
<!--    Col-->
<!--  },-->
<!--  props: {-->
<!--    title: {-->
<!--      type: String,-->
<!--      default: '',-->
<!--      required: false-->
<!--    },-->
<!--    col: {-->
<!--      type: Number,-->
<!--      required: false,-->
<!--      default: 3-->
<!--    },-->
<!--    size: {-->
<!--      type: String,-->
<!--      required: false,-->
<!--      default: 'large'-->
<!--    },-->
<!--    layout: {-->
<!--      type: String,-->
<!--      required: false,-->
<!--      default: 'horizontal'-->
<!--    }-->
<!--  },-->
<!--  provide () {-->
<!--    return {-->
<!--      col: this.col > 4 ? 4 : this.col-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style lang="less" scoped>-->

<!--  .description-list {-->

<!--    .title {-->
<!--      color: rgba(0,0,0,.85);-->
<!--      font-size: 14px;-->
<!--      font-weight: 500;-->
<!--      margin-bottom: 16px;-->
<!--    }-->

<!--    /deep/ .term {-->
<!--      color: rgba(0,0,0,.85);-->
<!--      display: table-cell;-->
<!--      line-height: 20px;-->
<!--      margin-right: 8px;-->
<!--      padding-bottom: 16px;-->
<!--      white-space: nowrap;-->

<!--      &:not(:empty):after {-->
<!--        content: ":";-->
<!--        margin: 0 8px 0 2px;-->
<!--        position: relative;-->
<!--        top: -.5px;-->
<!--      }-->
<!--    }-->

<!--    /deep/ .content {-->
<!--      color: rgba(0,0,0,.65);-->
<!--      display: table-cell;-->
<!--      min-height: 22px;-->
<!--      line-height: 22px;-->
<!--      padding-bottom: 16px;-->
<!--      width: 100%;-->
<!--      &:empty {-->
<!--        content: ' ';-->
<!--        height: 38px;-->
<!--        padding-bottom: 16px;-->
<!--      }-->
<!--    }-->

<!--    &.small {-->

<!--      .title {-->
<!--        font-size: 14px;-->
<!--        color: rgba(0, 0, 0, .65);-->
<!--        font-weight: normal;-->
<!--        margin-bottom: 12px;-->
<!--      }-->
<!--      /deep/ .term, .content {-->
<!--        padding-bottom: 8px;-->
<!--      }-->
<!--    }-->

<!--    &.large {-->
<!--      /deep/ .term, .content {-->
<!--        padding-bottom: 16px;-->
<!--      }-->

<!--      .title {-->
<!--        font-size: 16px;-->
<!--      }-->
<!--    }-->

<!--    &.vertical {-->
<!--      .term {-->
<!--        padding-bottom: 8px;-->
<!--      }-->
<!--      /deep/ .term, .content {-->
<!--        display: block;-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--</style>-->
